<template>
  <div class="box1">
    <van-sidebar v-model="activeKey">
      <van-sidebar-item
        :title="item"
        v-for="(item, index) in categoryList"
        :key="index"
        @click="getbandlist(item)"
      />
    </van-sidebar>
    <div class="item">
      <h4
        @click="getCategorylistBandlist(index)"
        v-for="(item, index) in Brandlist"
        :key="index"
      >
        {{ item.brand }}
      </h4>
      <div class="outerbox">
        <div
          class="figure"
          v-for="(item, index) in CategorylistBandlist"
          :key="index + 'only'"
          @click="jumpTo(item.proid)"
        >
          <img :src="item.img1" alt="" />
            <span>{{ item.proname }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Sidebar, SidebarItem, Collapse, CollapseItem } from "vant";

import {
  getcategorylist,
  getBandlist,
  getCategorylistBandlist,
} from "../../apis/sort";

Vue.use(Sidebar);
Vue.use(SidebarItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
export default {
  name: "SideBar",

  data() {
    return {
      activeKey: 0,
      categoryList: [],
      Brandlist: [],
      CategorylistBandlist: [],
      category: "手机",
    };
  },

  mounted() {},

  methods: {
    getbandlist(category) {
      this.category = category;
      getBandlist({ category }).then((data) => {
        this.Brandlist = data.data.data;
      });
      this.CategorylistBandlist = [];
    },

    async getCategorylistBandlist(index) {
      await getCategorylistBandlist({
        category: this.category,
        brand: this.Brandlist[index].brand,
        count: 1,
        limitNum: 12,
      }).then((res) => {
        this.CategorylistBandlist = res.data.data;
      });
    },
    jumpTo(proid) {
      this.$router.push("/pro/detail/" + proid);
    },
  },

  created() {
    getcategorylist().then((data) => {
      // console.log(data.data.data)
      this.categoryList = data.data.data;
    });

    getBandlist({ category: "手机" }).then((data) => {
      this.Brandlist = data.data.data;
      console.log(data.data.data);
    });
  },
};
</script>

<style  scoped>
.box1 {
  display: flex;
}
h4 {
  margin-bottom: 0.2rem;
  background-color: #fff;
}
.van-collapse {
  padding: 0.1rem 0.2rem;
  background-color: #fff;
  flex: 1;
  width: 100%;
}
.outerbox {
  display: flex;
  width: 100%;
  justify-content: space-around;
  flex-wrap: wrap;
}
.figure {
  height: 1rem;
  text-align: center;
  background-color: #fff;
  display: flex;
  flex: 1;
}
.figure img {
  width: 1rem;
  height: 100%;
}
.figure span {
  color: #999;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.item {
  width: 100%;
  padding: 0.1rem 0.2rem;
}
</style>